// 获取标签对象

// 写入验证码的a标签
const oAVc = document.querySelector('#sc');

// 提交的button标签
const oBtn = document.querySelector('button');

// 账号 input
const oIptName = document.querySelector('[name="name"]');

// 密码1 input
const oIptPwd1 = document.querySelector('[name="pwd1"]');

// 密码2 input
const oIptPwd2 = document.querySelector('[name="pwd2"]');

// 昵称 input
const oIptNickname = document.querySelector('[name="nickname"]');

// 验证码 input
const oIptVc = document.querySelector('[name="vc"]');

// 密码1 之后的span标签
const oPwd1Span = document.querySelector('[name="pwd1Span"]');

// 验证码 之后的span标签
const oVcSpan = document.querySelector('[name="vcSpan"]');

// 注册结果 div标签
const oDivMsg = document.querySelector('[name="msg"]');

// 功能0  根据 localStorage 判断有没有登录 生成页面内容

// 调用函数 判断 有没有登录 设定 页面内容
isLogin();

// 功能1  调用函数 生成 6位随机验证码 写入页面

// 写入随机验证码
oAVc.innerHTML = myGetVc();

// 点击标签 写入新的验证码
// a标签 href="JavaScript:;" href属性要写成 JavaScript:; 
// 要不然 a标签默认执行的是 点击跳转效果
oAVc.addEventListener('click', function () {
    // 写入新的验证码
    oAVc.innerHTML = myGetVc();
})


// 功能2  点击button标签 验证数据格式 发送注册请求
oBtn.addEventListener('click', function () {
    // 获取 标签中的数据
    let name = oIptName.value;
    let pwd1 = oIptPwd1.value;
    let pwd2 = oIptPwd2.value;
    let nickname = oIptNickname.value;
    let vc = oIptVc.value;

    // 验证数据是不是符合规范

    // 实际项目中 根据项目需求 定义 正则表达式验证

    // 任何验证 报错 都要刷新获取新的验证码
    // 任何验证 报错 都要终止之后程序的执行

    // 两个密码相同验证
    if( pwd1 !== pwd2 ){
      // 如果 两个密码不同 在 pwd1 之后的span标签写入提示信息
      oPwd1Span.innerHTML = '<span style="color:red">两次密码不同</span>' ;

      // 写入新的验证码
      oAVc.innerHTML = myGetVc() ; 

      // 终止之后程序的执行
      return;

    }else{
      // 如果 两个密码相同 在 pwd1 之后的span标签写入空内容 删除之前的报错信息
      oPwd1Span.innerHTML = '' ;
    }

    // 输入的验证码 和 span中的验证码 必须相同
    // 如果 要求大小写必须一致 直接 比较判断 两个数据
    // 如果 要求大小写不敏感 可以使用 正则表达式 忽略大小写 或者 使用函数 统一大小写

    // 获取span标签当前写入的内容
    let spanVc = oAVc.innerHTML ;

    // 不区分大写小的判断
    if( vc.toLowerCase() !== spanVc.toLowerCase() ){
      // 如果 两个验证码不同 写入提示信息
      oVcSpan.innerHTML = '<span style="color:red">输入的验证码不同</span>';

      // 写入新的验证码
      oAVc.innerHTML = myGetVc() ; 

      // 终止之后程序的执行
      return;

    }else{
      // 如果 两个验证码相同 写入空内容 清除报错信息
      oVcSpan.innerHTML = '';
    }

    // 执行注册操作
    setRegister();
})


// 定义 async 函数 通过 await 执行 异步操作
// async 和 await 定义的程序 是 一个独立的函数程序
// 不能直接调用 点击事件中 定义的变量

async function setRegister() {
    // 通过 await 调用 封装的promise函数

    // 执行 函数时 再次获取需要的数据
    // 获取 标签中的数据
    let name = oIptName.value;
    let pwd1 = oIptPwd1.value;
    let pwd2 = oIptPwd2.value;
    let nickname = oIptNickname.value;

    // res中 存储的是 请求结果
    const res = JSON.parse(await myPromise({
        url: 'http://localhost:8888/users/register',
        type: 'post',
        data: {
            username: name,
            password: pwd1,
            rpassword: pwd2,
            nickname: nickname,
        },
    }));

    // 根据 res中的结果 动态渲染生成页面
    // res中 code是 0 表示注册失败
    // res中 code是 1 表示注册成功
    if (res.code === 0) {
        // 注册失败 写入 提示信息
        oDivMsg.innerHTML = `<span style="color:red">${res.message}</span>`;

    } else if (res.code === 1) {
        // 定义变量 存储 倒计时 时间
        let num = 5;

        // 注册成功 倒计时跳转效果
        oDivMsg.innerHTML = `<span style="color:blue">注册成功 ${num}秒 后 跳转 首页面 点击跳转 <a href="./login.html">登录页</a></span>`;

        // 设定定时器
        let time = setInterval(function () {
            // 每次将倒计时时间累减1
            num--;

            // 当 倒计时 结果 是 0
            if (num === 0) {
                // 清除定时器 
                clearInterval(time);

                // 跳转首页面
                window.location.href = './index.html';

                // 终止向页面写入 新内容
                return;

            }

            // 将 结果 写入到定时器中
            oDivMsg.innerHTML = `<span style="color:blue">注册成功 ${num}秒 后 跳转 首页面 点击跳转 <a href="./login.html">登录页</a></span>`;

        }, 1000)
    }

}
